<template>
    <div class="order-container">

      <el-button style="position: absolute; top:2%;left: 5%" type="info" @click="visible = true;getFlightPage()">新增订单</el-button>
      <el-table
        :data="tableData"
        style="width: 99.8%;position: absolute;right: 0; margin-top: 5%"
        @selection-change="handleSelectionChange">
        <el-table-column
          label="生成时间"
          prop="generateTime"
          width="200">
        </el-table-column>
        <el-table-column
          prop="name"
          label="乘客姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="passengerId"
          label="乘客身份证"
          width="250">
        </el-table-column>
        <el-table-column
          prop="price"
          label="票价"
          width="100">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-link type="primary"
                     size="mini"
                     @click="visible2 = true;getFlightMessage(scope.$index, scope.row)">航班详情</el-link>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteIndent(scope.$index, scope.row)" style="position: absolute; left: 10%; top:19%">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="新增订单" :visible.sync="visible">

        <el-form ref="form" :model="passengerMessage" label-width="80px">
          <el-form-item label="乘客身份证" label-width="100px">
            <el-input v-model="passengerMessage.passengerId"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="passengerMessage.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="passengerMessage.sex" placeholder="请选择">
              <el-option
                label="男"
                value="男">
              </el-option>
              <el-option
                label="女"
                value="女">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="passengerMessage.phone"></el-input>
          </el-form-item>
          <el-form-item label-width="90px" label="选择航班">
            <el-select v-model="passengerMessage.flightId" placeholder="请选择">
              <el-option
                v-for="item in flights"
                :key="item.value"
                :label="item.flightId"
                :value="item.flightId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="舱别">
            <el-select v-model="passengerMessage.cabin" placeholder="请选择">
              <el-option
                label="经济舱"
                value="0">
              </el-option>
              <el-option
                label="商务舱"
                value="1">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addIndent">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="航班详情" :visible.sync="visible2">

        <el-table
          :data="flight"
          @selection-change="handleSelectionChange">
          <el-table-column
            label="航班编号"
            prop="flightId"
            width="100">
          </el-table-column>
          <el-table-column
            label="起飞时间"
            prop="takeOffDate"
            width="200">
          </el-table-column>
          <el-table-column
            prop="arriveDate"
            label="抵达时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="takeOffAerodrome"
            label="起飞机场"
            width="100">
          </el-table-column>
          <el-table-column
            prop="arriveAerodrome"
            label="抵达机场"
            width="100">
          </el-table-column>
          <el-table-column
            prop="economyPrice"
            label="经济舱价格"
            width="100">
          </el-table-column>
          <el-table-column
            prop="businessPrice"
            label="商务舱价格"
            width="100">
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="nextPage()"
        style="position: absolute; bottom: 10%;left: 32%">
      </el-pagination>

    </div>
</template>

<script>

  import {getIndentPage,
    getFlightMessage,
    deleteIndent,
    addIndent} from "../api/indent";
  import {Message} from "element-ui";
  import {getFlightPage} from "../api/flight";

  export default {
        name: "Indent",
        data(){
          return{
            visible:false,
            visible2:false,
            total:'',
            pageSize:6,
            currentPage:'',
            flight: [],
            passengerMessage:{
              passengerId:'',
              sex:'',
              name:'',
              phone:'',
              flightId:'',
              cabin:''
            },
            flights:[],
            tableData:[]
          }
        },

       methods:{
         handleSelectionChange(val){
           console.log(val)
         },

         getFlightMessage(index,indent){
           const _this = this;
           getFlightMessage({
             indentId:indent.indentId
           }).then(function (response) {
                _this.flight = response.data.obj;
           })
         },

         deleteIndent(index,indent){
           const _this = this;
           this.$confirm('是否删除该乘客'+indent.name+':'+indent.passengerId+'的订单?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             deleteIndent({
                id:indent.indentId
             }).then(function (response) {
               Message({
                 message: response.data.message,
                 type: 'success',
                 duration: 2 * 1000
               })
               getIndentPage({
                 pageNum:_this.currentPage,
                 pageSize:_this.pageSize
               }).then(function (response) {
                 console.log(response.data)
                 _this.tableData = response.data.obj.indentList;
                 _this.total = response.data.obj.total;
               })
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消购买'
             });
           });
         },

         addIndent(){
           const _this = this;
           addIndent({
             passengerMessage: this.passengerMessage,
             cabin:this.passengerMessage.cabin,
             flightId:this.passengerMessage.flightId
           }).then(function (response) {
             getIndentPage({
               pageNum:_this.currentPage,
               pageSize:_this.pageSize
             }).then(function (response) {
               console.log(response.data)
               _this.tableData = response.data.obj.indentList;
               _this.total = response.data.obj.total;
             })
             _this.visible = false;
             Message({
               message: response.data.message,
               type: 'success',
               duration: 2 * 1000
             })
           })
         },

         getFlightPage(){
           const _this = this;
           getFlightPage({
             pageNum:1,
             pageSize: 100
           }).then(function (response) {
             _this.total = response.data.obj.total;
             _this.flights = response.data.obj.flightList;
           })
         },

         nextPage(){
           const _this = this
           getIndentPage({
             pageNum:this.currentPage,
             pageSize:this.pageSize
           }).then(function (response) {
             console.log(response.data)
             _this.tableData = response.data.obj.indentList;
             _this.total = response.data.obj.total;
           })
         }
       },

      created() {
          const _this = this;
          getIndentPage({
            pageNum:1,
            pageSize:this.pageSize
          }).then(function (response) {
            console.log(response.data)
            _this.tableData = response.data.obj.indentList;
            _this.total = response.data.obj.total;
          })
      }
  }
</script>

<style>

  *{
    padding: 0;
    margin: 0;
  }

</style>
